<template>
	<div class="box">
		<div class="query-box">
			<div class="line-center">
				<el-row>
					<el-form ref="form" :model="activityQueryForm" size="small" label-width="70px">
						<el-col :span="5">
							<el-form-item label="活动名称" style="width: 220px">
								<el-input clearable v-model="activityQueryForm.activityName"
									placeholder="请输入活动名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="发布状态" style="width: 210px">
								<el-select clearable v-model="activityQueryForm.status" placeholder="请选择发布状态">
									<el-option label="未发布" value="0"></el-option>
									<el-option label="已发布" value="1"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-form-item label="活动类型" style="width: 210px">
								<el-select clearable v-model="activityQueryForm.activityTypeId" placeholder="请选择发布状态">
									<el-option v-for="(item, index) in activityType" :key="index" :label="item.name"
										:value="item.id"></el-option>
									<!-- <el-option label="已发布" value="1"></el-option> -->
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item>
								<el-button type="primary" plain @click="submit" icon="el-icon-search">搜索</el-button>
							</el-form-item>
						</el-col>

						<!-- <el-col :span="2"></el-col> -->
						<el-col :span="4">
							<el-button @click="HandleBatchDelete" type="danger" plain size="small"
								icon="el-icon-delete">批量删除</el-button>
						</el-col>
						<el-col :span="3">
							<el-button @click="() => { this.drawerConfig.drawer = true; this.activityForm = {}; }"
								type="success" plain size="small" icon="el-icon-plus">添加活动</el-button>
						</el-col>
					</el-form>
				</el-row>
			</div>
		</div>

		<!-- 表格 -->
		<div class="table">
			<table-component @getDetails="getActivityDetails" @columnIds="getColumnIds" :loading="tableLoading"
				:table-data="activityRespData" :column="activityColumn" @statusColumn="tableStatusColumn">
				<template v-slot:operate="{ row }">
					<el-button @click="changeActivityCoumn(row.id)" type="text" size="small">
						编辑
					</el-button>
					<el-button @click="deleteActivity(row.id)" style="color: red;" type="text" size="small">
						删除
					</el-button>
				</template>
			</table-component>
			<pagination-component :page-query="activityQueryForm" :page-total="activityTotal" @handleSizeChange="sizeChange"
				@handleCurrentChange="currentChange"></pagination-component>
		</div>

		<!-- 弹框 -->
		<dialog-component title="活动发布状态" :dialog-visible="dialogFlag" :form="activityForm" @handleClose="dialogClose"
			@submitStatus="submitStatus1" :status-form-column="statusFormColumn"></dialog-component>

		<!-- 侧边框 -->
		<drawer-component :image-url="activityForm.img" :title="drawerTitleFlag ? '添加活动' : '编辑活动'"
			:config="drawerConfig" :form="activityForm" :form-column="activityFormColumn" @handleClose="drawerClosed"
			@drawerSubmit="formSubmit" :activity-type="activityType" :rules="rulesForm"></drawer-component>

		<dialog-component :width="'50%'" @handleClose="dialogClose" :content="details"
			:dialog-visible="dialogDetailsFlag" title="活动详情"></dialog-component>
	</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import TableComponent from '@/components/TableComponent.vue';
import PaginationComponent from '@/components/PaginationComponent.vue';
import DrawerComponent from '@/components/DrawerComponent.vue';
import DialogComponent from '@/components/DialogComponent.vue';
import { updateActivityReq, queryActivityById } from '@/api/admin/common';
import { customFormatterDataTime, convertToISOFormat } from '@/utils/dateTimeFormatter';
import { message, messageType } from '@/utils/message';
export default {
	components: {
		TableComponent,
		PaginationComponent,
		DrawerComponent,
		DialogComponent
	},
	data() {
		return {
			activityQueryForm: {
				activityName: '',
				activityTypeId: '',
				page: 1,
				pageSize: 10,
				status: '',
			},

			activityForm: {
				id: '',
				activityName: '',
				activityTypeName: '',
				img: '',
				userName: '',
				phone: '',
				details: '',
				address: '',
				status: '',
				date: [],
			},
			activityFormColumn: [
				{ label: '活动名称', prop: 'activityName', inputType: 'text', placeholder: '请输入活动名称', type: 'Input', width: '450px' },
				{ label: '活动类型', prop: 'activityTypeName', placeholder: '请输入活动名称', type: 'Select', width: '450px' },
				{ label: '图片', prop: 'img', type: 'upload', placeholder: '请上传图片', width: '450px' },
				{ label: '联系人', prop: 'userName', inputType: 'text', placeholder: '请输入联系人', type: 'Input', width: '450px' },
				{ label: '联系电话', prop: 'phone', inputType: 'text', placeholder: '请输入电话号码', type: 'Input', width: '450px' },
				{ label: '活动详情', prop: 'details', inputType: 'textarea', placeholder: '请输入活动详情', type: 'Textarea', width: '450px' },
				{ label: '活动地址', prop: 'address', inputType: 'text', placeholder: '请输入活动地址', type: 'Input', width: '450px' },
				{
					label: '发布状态',
					prop: 'status',
					placeholder: '请选择发布状态',
					optionLabel: [
						{ label: '不发布', value: '0' },
						{ label: '发布', value: '1' }
					],
					type: 'Select',
					width: '450px'
				},
				{ label: '活动时间', prop: 'date', inputType: 'datetimerange', type: 'Date', startPlaceholder: '开始日期', endPlaceholder: '结束日期', width: '450px' }
			],
			rulesForm: {
				activityName: [{ required: true, message: '请输入活动名', trigger: 'blur' }],
				activityTypeName: [{ required: true, message: '请选择活动类型', trigger: 'blur' }],
				img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
				userName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
				phone: [{ required: true, message: '请输入电话号码，号码为11位数', trigger: 'blur' }],
				details: [{ required: true, message: '请输入详情', trigger: 'blur' }],
				address: [{ required: true, message: '请填写居住地址', trigger: 'blur' }],
				date: [{ required: true, message: '请选择活动开始时间', trigger: 'blur' }],
				// endTime: [{ required: true, message: '请选择活动结束时间', trigger: 'blur' }]
			},
			activityColumn: [
				{ prop: 'activityName', label: '活动名称', width: '120' },
				{ prop: 'img', label: '活动图片', width: '120' },
				{ prop: 'userName', label: '联系人', width: '120' },
				{ prop: 'phone', label: '联系电话', width: '120' },
				{ prop: 'activityTypeName', label: '活动类型', width: '120' },
				{ prop: 'details', label: '活动详情', width: '120' },
				{ prop: 'address', label: '活动地址', width: '120' },
				{ prop: 'startDate', label: '开始时间', width: '200' },
				{ prop: 'endDate', label: '结束时间', width: '200' },
				{ prop: 'createTime', label: '创建时间', width: '200' },
				{ prop: 'updateTime', label: '修改时间', width: '200' },
				{ prop: 'createUser', label: '创建人', width: '120' },
				{ prop: 'updateUser', label: '修改人', width: '120' },
				{ prop: 'status', label: '发布状态', status: ['未发布', '已发布'], width: '120' }
			],
			drawerTitleFlag: true,
			drawerConfig: {
				size: '50%',
				drawer: false,
				direction: 'rtl'
			},
			tableLoading: true,
			dialogFlag: false,
			dialogDetailsFlag: false,
			details: '',
			statusFormColumn: [
				{
					label: '发布状态',
					prop: 'status',
					placeholder: '请选择发布状态',
					statusValue: ['0', '1'],
					optionLabel: [
						{ label: '未发布', value: '0' },
						{ label: '发布', value: '1' }
					],
					type: 'Select',
					width: '300px'
				}
			],
			ids: [],
		};
	},

	mounted() {
		this.pageQueryactivityListActions(this.activityQueryForm);
		this.pageQueryActivityTypeListActions();
	},
	computed: {
		...mapState('activity', ['activityRespData', 'activityTotal', 'activityType'])
	},
	methods: {
		/**
		 * 请求相关
		 */
		...mapActions('activity', ['pageQueryactivityListActions', 'pageQueryActivityTypeListActions', 'logicDeleteActivityByIdActions', 'logicBatchDeleteActivityByIdsActions', 'addActivityActions', 'updateActivityActions']),
		submit() {
			console.log('activityForm-->', this.activityQueryForm);
			this.pageQueryactivityListActions(this.activityQueryForm);

			/* if (activityRespData.data) {
				this.isRespData = true;
			} */
		},
		getActivityDetails(row) {
			console.log('row-->', row);
			this.details = row;
			this.dialogDetailsFlag = true;
		},
		// 表单提交 添加和编辑信息
		async formSubmit(form) {
			console.log('form-->', form.date);

			const activityForm = {
				activityName: form.activityName,
				activityTypeId: form.activityTypeName,
				img: form.img,
				userName: form.userName,
				phone: form.phone,
				details: form.details,
				address: form.address,
				status: form.status,
				startDate: convertToISOFormat(form.date[0]),
				endDate: convertToISOFormat(form.date[1]),
			};
			console.log('activityForm-->', activityForm);
			// 添加活动
			if (this.drawerTitleFlag) {
				this.addActivityActions(activityForm);
			} else {
				activityForm.id = form.id; // 添加id属性
				console.log('activityForm--->', activityForm);
				this.updateActivityActions(activityForm);
			}
			setTimeout(() => {
				message(messageType().success, '操作成功');
				this.drawerClosed();
				this.pageQueryactivityListActions(this.activityQueryForm);
			}, 1000);
		},
		// 修改发布状态
		async submitStatus1(row) {
			console.log('-->', row);
			console.log("...");
			const changeStatus = {
				id: row.id,
				status: row.status
			};
			await updateActivityReq(changeStatus).then(
				(resp) => {
					if (!resp) return;
					console.log(resp);
					this.dialogClose();
					message(messageType().success, resp.data.msg);
				},
				(error) => {
					console.log(error);
				}
			);
			this.pageQueryactivityListActions(this.activityQueryForm);
		},
		// 修改活动信息
		async changeActivityCoumn(id) {
			console.log('id-->', id);
			await queryActivityById(id).then(resp => {
				let data = resp.data.data;
				console.log('data-->', data);

				const arrayDate = []
				arrayDate.push(customFormatterDataTime(data.startDate));
				arrayDate.push(customFormatterDataTime(data.endDate));
				this.activityForm = {
					id: data.id,
					activityName: data.activityName,
					activityTypeName: data.activityTypeId,
					img: data.img,
					userName: data.userName,
					phone: data.phone,
					details: data.details,
					address: data.address,
					status: String(data.status),
					date: arrayDate,
				}

			}, error => {
				console.log(error);

			})
			this.drawerTitleFlag = false;
			this.drawerConfig.drawer = true;
		},
		async deleteActivity(id) {
			this.logicDeleteActivityByIdActions(id);
			setTimeout(() => {
				message(messageType().success, '操作成功');
				this.pageQueryactivityListActions(this.activityQueryForm);
			}, 500);
		},
		HandleBatchDelete() {
			this.logicBatchDeleteActivityByIdsActions(this.ids);
			setTimeout(() => {
				message(messageType().success, '操作成功');
				this.pageQueryactivityListActions(this.activityQueryForm);
			}, 500);
		},
		getColumnIds(ids) {
			this.ids = ids
		},
		//搜索 下拉框事件
		/* selectChange() {
			console.log('status-->', this.activityQueryForm.status);
			this.pageQueryactivityListActions(this.activityQueryForm);
		}, */

		// 获取该行的信息
		tableStatusColumn(row) {
			// this.activityForm = row;
			this.activityForm.id = row.id;
			this.activityForm.status = String(row.status)
			this.dialogFlag = true;
		},


		/**
		 * 关闭相关
		 */
		// 关闭相关
		dialogClose() {
			this.dialogFlag = false;
			this.dialogDetailsFlag = false;
		},

		/**
		 * 关闭侧边框
		 */
		drawerClosed() {
			this.drawerConfig.drawer = false;
		},

		/**
		 *  分页相关
		 */
		// 每页条数
		sizeChange(val) {
			this.activityQueryForm.pageSize = val;
			this.pageQueryactivityListActions(this.activityQueryForm);
		},
		// 当前页
		currentChange(val) {
			this.activityQueryForm.page = val;
			this.pageQueryactivityListActions(this.activityQueryForm);
		}
	}
};
</script>
<style lang="scss">
.box {
	width: 100%;

	.query-box {
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		height: 55px;
		margin: 10px;

		.line-center {
			padding: 10px 10px 10px 5px;
		}
	}

	.table {
		margin: 10px;
		max-height: calc(100vh - 55px - 55px - 30px - 30px);
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

		.page-box {
			text-align: center;
		}

		// 表格图片
		.el-image__error,
		.el_image,
		img {
			width: 60px;
			height: 60px;
			// border-radius: 50%;
		}
	}
}
</style>
